<template>
  <h1>设备状态监控</h1>
  <div id="dStatus"></div>
</template>
<script>
  import { SIGNALR_HUB_DEVICE_STATUS_URL } from '@/utils/constants'
  const connection = new signalR.HubConnectionBuilder()
            .withUrl(SIGNALR_HUB_DEVICE_STATUS_URL)
            .build();

  connection.on("ReceiveDeviceHistory",(deviceId, history)=>{
    const dStatusDiv = document.getElementById("dStatus");
    const newStatus = document.createElement("div");
    newStatus.textContent = 'status: ${deviceId} : ${history}';
    dStatusDiv.appendChild(newStatus);

  })
  connection.start()
            .then(() => {
                console.log("SignalR connection started.");
            })
            .catch(err => {
                console.error("Error connecting to SignalR: ", err);
            });
 
        window.addEventListener("beforeunload", () => {
            connection.stop().then(() => {
                console.log("SignalR connection stopped.");
            }).catch(err => {
                console.error("Error stopping SignalR connection: ", err);
            });
        });
</script>

<!--<template>
  <div class="device-status-container">
    <h2>设备状态监控</h2>-->

     <!--连接状态显示--> 
    <!--<div class="connection-status">
      <span :class="['status-indicator', connectionStatus]"></span>
      SignalR 状态: {{ statusText }}
      <button @click="toggleConnection" class="btn">-->
        <!--{{ isConnected ? '断开连接' : '连接' }}-->
      <!--</button>
    </div>-->

    <!-- 测试消息推送 -->
    <!--<div class="test-controls">
      <input v-model="testMessage" placeholder="输入测试消息" class="input" />
      <button @click="sendTestMessage" :disabled="!isConnected" class="btn">
        推送测试消息
      </button>
    </div>-->

    <!-- 设备状态列表 -->
    <!--<div class="device-list">
      <h3>设备状态更新</h3>
      <div v-if="deviceStatusList.length === 0" class="empty-state">
        暂无设备状态数据
      </div>
      <div v-else>
        <div v-for="(status, index) in deviceStatusList" :key="index" class="status-item">
          <div class="device-id">设备ID: {{ status.deviceId }}</div>
          <div class="device-name">名称: {{ status.name }}</div>
          <div class="production-line">生产线: {{ status.productionLine }}</div>
          <div class="workshop">车间: {{ status.workshop }}</div>
          <div class="timestamp">更新时间: {{ formatTime(status.timestamp) }}</div>
        </div>
      </div>
    </div>-->
  <!--</div>
</template>

<script>
  //import DeviceStatusService from '@/services/deviceStatusService'
  //import deviceApi from '@/api/deviceStatusApi'

  ////export default {
  ////  name: 'DeviceStatusMonitor',
  ////  data() {
  ////    return {
  ////      isConnected: false,
  ////      deviceStatusList: [],
  ////      testMessage: '测试消息123'
  ////    }
  ////  },
  ////  computed: {
  ////    connectionStatus() {
  ////      return this.isConnected ? 'connected' : 'disconnected'
  ////    },
  ////    statusText() {
  ////      return this.isConnected ? '已连接' : '未连接'
  ////    }
  ////  },
  ////  async mounted() {
  ////    await this.initializeService()
  ////  },
  ////  beforeDestroy() {
  ////    this.cleanup()
  ////  },
  ////  methods: {
  ////    async initializeService() {
  ////      // 注册设备状态更新回调
  ////      DeviceStatusService.onDeviceStatusUpdate(this.handleDeviceStatusUpdate)

  ////      // 自动连接
  ////      await this.connect()
  ////    },

  ////    async connect() {
  ////      try {
  ////        const success = await DeviceStatusService.connect()
  ////        this.isConnected = success

  ////        if (success) {
  ////          this.$message.success('设备状态服务连接成功')
  ////        } else {
  ////          this.$message.error('设备状态服务连接失败')
  ////        }
  ////      } catch (error) {
  ////        console.error('连接失败:', error)
  ////        this.$message.error('连接失败: ' + error.message)
  ////      }
  ////    },

  ////    async disconnect() {
  ////      try {
  ////        await DeviceStatusService.disconnect()
  ////        this.isConnected = false
  ////        this.$message.info('已断开设备状态服务')
  ////      } catch (error) {
  ////        console.error('断开连接失败:', error)
  ////      }
  ////    },

  ////    toggleConnection() {
  ////      if (this.isConnected) {
  ////        this.disconnect()
  ////      } else {
  ////        this.connect()
  ////      }
  ////    },

  ////    // 处理设备状态更新
  ////    handleDeviceStatusUpdate(deviceInfo) {
  ////      // 添加时间戳
  ////      const statusWithTime = {
  ////        ...deviceInfo,
  ////        timestamp: new Date()
  ////      }

  ////      // 添加到列表开头
  ////      this.deviceStatusList.unshift(statusWithTime)

  ////      // 限制列表长度，避免内存泄漏
  ////      if (this.deviceStatusList.length > 50) {
  ////        this.deviceStatusList = this.deviceStatusList.slice(0, 50)
  ////      }

  ////      // 可以在这里添加通知或其他业务逻辑
  ////      this.showNotification(deviceInfo)
  ////    },

  ////    // 显示通知
  ////    showNotification(deviceInfo) {
  ////      if (this.$notify) {
  ////        this.$notify({
  ////          title: '设备状态更新',
  ////          message: `设备 ${deviceInfo.deviceId} 状态已更新`,
  ////          type: 'info',
  ////          duration: 3000
  ////        })
  ////      }
  ////    },

  ////    // 发送测试消息（调用你的 Controller 接口）
  ////    async sendTestMessage() {
  ////      if (!this.testMessage.trim()) {
  ////        this.$message.warning('请输入测试消息')
  ////        return
  ////      }

  ////      try {
  ////        await deviceApi.pushMessageToAll(this.testMessage)
  ////        this.$message.success('测试消息发送成功')
  ////      } catch (error) {
  ////        console.error('发送测试消息失败:', error)
  ////        this.$message.error('发送失败: ' + error.message)
  ////      }
  ////    },

  ////    // 格式化时间
  ////    formatTime(timestamp) {
  ////      return new Date(timestamp).toLocaleString('zh-CN')
  ////    },

  ////    // 清理资源
  ////    cleanup() {
  ////      DeviceStatusService.offDeviceStatusUpdate(this.handleDeviceStatusUpdate)
  ////      this.disconnect()
  ////    }
  ////  }
  ////}
</script>

<style scoped>
  .device-status-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }

  .connection-status {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
  }

  .status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
  }

    .status-indicator.connected {
      background: #52c41a;
      animation: pulse 2s infinite;
    }

    .status-indicator.disconnected {
      background: #ff4d4f;
    }

  @keyframes pulse {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 1;
    }
  }

  .test-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }

  .input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
  }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn:hover:not(:disabled) {
      background: #f0f0f0;
    }

  .device-list {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 15px;
  }

  .empty-state {
    text-align: center;
    color: #999;
    padding: 20px;
  }

  .status-item {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fafafa;
  }

    .status-item:last-child {
      margin-bottom: 0;
    }

  .device-id {
    font-weight: bold;
    color: #1890ff;
  }

  .timestamp {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
</style>-->
